﻿const {Select,DatePicker,TimePicker } = antd;
const Option = Select.Option;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
class Page extends React.Component {
    state = Object.assign(mountData, {
    	itemShowday: false,
    	itemShowmonth: false,
    	itemShowweek: false,
    	itemShowtime: false,
    	itemShowdate: false
    });
    handleChange = (value) => {
        console.log(value)
        if(value === 'day'){
	        this.setState({
				itemShowday: true
			})
	        this.setState({
				itemShowmonth: false
			})
			this.setState({
				itemShowweek: false
			})
	        this.setState({
				itemShowtime: false
			})
			this.setState({
				itemShowdate: false
			})
        }else if(value === 'month'){
	        this.setState({
				itemShowday: false
			})
	        this.setState({
				itemShowmonth: true
			})
			this.setState({
				itemShowweek: false
			})
	        this.setState({
				itemShowtime: false
			})
			this.setState({
				itemShowdate: false
			})
        }else if(value === 'week'){
	        this.setState({
				itemShowday: false
			})
	        this.setState({
				itemShowmonth: false
			})
			this.setState({
				itemShowweek: true
			})
	        this.setState({
				itemShowtime: false
			})
			this.setState({
				itemShowdate: false
			})
        }else if(value === 'time'){
	        this.setState({
				itemShowday: false
			})
	        this.setState({
				itemShowmonth: false
			})
			this.setState({
				itemShowweek: false
			})
	        this.setState({
				itemShowtime: true
			})
			this.setState({
				itemShowdate: false
			})
        }else if(value === 'date'){
	        this.setState({
				itemShowday: false
			})
	        this.setState({
				itemShowmonth: false
			})
			this.setState({
				itemShowweek: false
			})
	        this.setState({
				itemShowtime: false
			})
			this.setState({
				itemShowdate: true
			})
        }
    }
    onChange = (date, dateString) => {
	  	console.log(date, dateString);
	}
	onChangetime = (time, timeString) => {
	  	console.log(time, timeString);
	}
    render() {
    	const _this = this;
    	const {itemShowday,itemShowmonth,itemShowweek,itemShowtime,itemShowdate} = this.state
        return (
        	<div>
                <Select defaultValue="尚未选择" 
                style={{ width: 300, marginTop: 50, marginLeft: 50 }} 
                onChange={this.handleChange}>
				      <Option value="day">日选择器</Option>
				      <Option value="month">月选择器</Option>
				      <Option value="week">周选择器</Option>
				      <Option value="time">时间选择器</Option>
				      <Option value="date">年月日范围选择器</Option>
			    </Select>
			    <div style={{ width: 500, marginTop: 50, marginLeft: 50 }}>
					<DatePicker placeholder="日选择器" style={ itemShowday ? { display: 'block' } : { display: 'none' }} onChange={this.onChange} />
					
					<MonthPicker placeholder="月选择器" style={ itemShowmonth ? { display: 'block' } : { display: 'none' }} onChange={this.onChange} />
	                
	                <WeekPicker placeholder="周选择器" style={ itemShowweek ? { display: 'block' } : { display: 'none' }}  onChange={this.onChange} />
	            	
	            	<TimePicker placeholder="时间选择器" style={ itemShowtime ? { display: 'block' } : { display: 'none' }}  onChange={this.onChangetime} minuteStep={15} secondStep={10}  />
	            	
	            	<RangePicker placeholder="年月日范围选择器" style={ itemShowdate ? { display: 'block' } : { display: 'none' }}   onChange={this.onChange} />
	            </div>
            </div>
        );
    }
}

